<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单页面布局</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .header {
            background-color: #ff6b6b; /* 红色 */
            color: white;
            text-align: center;
            padding: 10px 0;
            flex: 0 0 5%; /* 固定高度为5% */
        }

        .footer {
            background-color: #ff6b6b; /* 红色 */
            color: white;
            text-align: center;
            padding: 10px 0;
            flex: 0 0 5%; /* 固定高度为5% */
        }

        .content {
            flex: 1; /* 自适应高度 */
            display: flex;
        }

        .left-sidebar {
            background-color: #6c757d; /* 灰色 */
            color: white;
            width: 15%; /* 固定宽度为15% */
            padding: 20px;
        }

        .right-content {
            background-color: #f8f9fa; /* 浅灰色 */
            color: black;
            flex: auto; /* 自适应宽度 */
            padding: 20px;
        }

        .menu-item {
            cursor: pointer;
            padding: 10px;
            border-bottom: 1px solid #888;
            display: block;
            color: white;
            text-decoration: none;
        }

        .menu-item:hover {
            background-color: #5a6268;
        }
    </style>
</head>
<body>
    <!-- 顶部 -->
    <div class="header">
        <h1>顶部区域</h1>
    </div>

    <!-- 中间部分 -->
    <div class="content">
        <!-- 左侧栏 -->
        <div class="left-sidebar">
            <a href="insert.html" class="menu-item" target="index">新增</a>
            <a href="updateone.html" class="menu-item" target="index">修改-one</a>
            <a href="update.html" class="menu-item" target="index">修改</a>
            <a href="#page3" class="menu-item" target="index">测试菜单3</a>
        </div>
        <!-- 右侧内容 -->
        <div class="right-content" id="right-content"  width="100%" height="100%">
           <!-- iframe标签 -->
            <iframe  width="100%" height="100%"  name="index" id="index" src=""  scrolling="auto"></iframe>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <h3>页脚区域</h3>
    </div>
</body>
</html>